<div class="modal-header primary">
    <h4 class="modal-title" id="modal-title">
        Create Consumer
        <a class="modal-close pull-right" ng-click="close()">
            <i class="mdi mdi-close"></i>
        </a>
    </h4>
</div>

<div class="modal-body" id="modal-body">
    <form class="form-horizontal">
        <div class="form-group" ng-class="{'has-error' : errors.username}">
            <label class="col-sm-4 control-label">username <br><em>
                <small class="help-block">semi-optional</small>
            </em></label>
            <div class="col-sm-7">
                <input ng-model="consumer.username" class="form-control">
                <div class="text-danger" ng-if="errors.username" data-ng-bind="errors.username"></div>
                <p class="help-block">The username of the consumer. You must send either this field or
                    <code>custom_id</code> with the request.</p>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error' : errors.custom_id}">
            <label class="col-sm-4 control-label">custom_id <br><em>
                <small class="help-block">semi-optional</small>
            </em></label>
            <div class="col-sm-7">
                <input ng-model="consumer.custom_id" class="form-control">
                <div class="text-danger" ng-if="errors.custom_id" data-ng-bind="errors.custom_id"></div>
                <p class="help-block">Field for storing an existing ID for the consumer, useful for mapping Kong with
                    users in your existing database. You must send either this field or <code>username</code> with the
                    request.</p>
            </div>
        </div>

        <div class="form-group" ng-if="isGatewayVersionEqOrGreater('1.1.0-rc1')">
            <label class="col-sm-4 control-label">Tags <br><em>
                <small class="help-block">optional</small>
            </em></label>
            <div class="col-sm-7">
                <chips ng-model="consumer.tags">
                    <chip-tmpl>
                        <div class="default-chip">
                            {{chip}}
                            <i class="mdi mdi-close" remove-chip></i>
                        </div>
                    </chip-tmpl>
                    <input ng-model-control
                           data-ng-keypress="onTagInputKeyPress($event)"
                           ng-model="$tag" uib-typeahead="tag for tag in tags | filter:$viewValue | limitTo:10"/>
                </chips>
                <p class="help-block">
                    Optionally add tags to the consumer
                </p>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-7">
                <button type="button" class="btn btn-primary btn-block" ng-click="submit()">
                    <i class="mdi mdi-check"></i>
                    Submit Consumer
                </button>
            </div>
        </div>

    </form>
</div>